<template>
	<view :class="{'tab-container': centerAlign}">
		<u-tabs :gutter="tabGutter" is-scroll :list="dataList" :current="currentIndex" :active-item-style="activeTabStyle"
		 :bar-style="activeTabBarStyle" @change="onTabChange"></u-tabs>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			centerAlign:{
				type: Boolean,
				default: true
			},
			currentTab:{
				type: String
			},
			dataList: {
				type: [String, Array],
				default: () => {
					return [{
						name: '测试',
						value: 'test'
					}]
				}
			}
		},
		watch: {
			currentTab: {
				immediate: true,
				handler(newVal, val){
					console.log('currentTab changed', newVal, val, this.dataList, this.currentIndex)
					if(this.dataList.length){
						let index = this.dataList.findIndex( item=> item.value == newVal)
						if(index >=0){
							this.currentIndex = index
						}
					}
				}
			}
		},
		data() {
			return {
				activeTabStyle: {
					color: '#068888',
				},
				activeTabBarStyle: {
					"background-color": '#068888'
				},
				currentIndex: 0
			}
		},
		computed: {
			tabGutter() {
				let len = this.dataList.length
				let res = 250 / len
				console.log('tabGutter', len, res)
				return res
			},
		},
		created() {},
		methods: {
			onTabChange(index) {
				console.log('onTabChange', index)
				this.currentIndex = index
				this.$emit('change', this.dataList[index])
			}
		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.tab-container {
		background-color: $uni-bg-color;
		// width: 750rpx;
		display: flex;
		justify-content: center;
	}
</style>
